import React, { Fragment, useEffect ,useRef} from 'react';
import ReactEcharts from 'echarts-for-react';
import {useSelector} from 'react-redux';
import echarts from 'echarts/lib/echarts';

export const DepthEchartsShow = () => {   // 接收传入的属性
  
  const depthDataa = useSelector(state => state.depthDataa2);
  const docData = useSelector(state => state.docData);
  const chartZoom = useSelector(state => state.gridConfig.chartZoom);

  var interval,depthInterval;
  // if(docData.doc_type === "纯数据文件"){
    depthInterval = docData.interval;
  // }else if(docData.doc_type === "绘图文件"){
  //   depthInterval = docData.docData.interval;
  // }
  if(depthInterval){
    interval = (5/depthInterval) - 1;
  }else{
    interval = 49;
  }

  const ref = useRef(null);

  function initCharts(){
    var chartRef = ref.current;
    if(chartRef){

      setTimeout(() => {   // 延时10ms进行渲染echarts，可是解决 实时获取当前div大小的问题;
        var myChart = echarts.init(chartRef);
        myChart.resize();
      }, 10); 

      var myChart = echarts.init(chartRef);
      var option = {
        grid: {   // 直角坐标系内绘图网格
          left: '30px',   // grid 组件离容器左侧的距离。
          right: '0',
          top:'0',
          bottom: '0',
          containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出
        },
    
        xAxis: {
          show: false,
        },
    
        yAxis: {
          type: 'category',  // category：类目轴，离散的类目数据
          inverse : true,  // 倒序
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
              color: "#ffffff",
              type: "solid"
            }
          },
          axisLabel: {
            interval: interval ,    // 49
            rotate: -90 ,
            fontSize: 12,
            verticalAlign:'top',
            align:"left"
          },
          splitLine:{  // 网格线,随后删掉
      　　　show:true
      　　},
          axisTick: {  // 刻度线
            show: false,
          },
          boundaryGap: false,   // 坐标轴两边留白
          data: depthDataa,   // y轴数据
        },
      }
      myChart.setOption(option);
    }
  }
  
  useEffect(() => {
    initCharts();
  })


  return (  
    <div className="depth-show" style={{height: ((depthDataa[depthDataa.length-1] - depthDataa[0])/5)*2*chartZoom }}> {/*  (（终深-起深）/5)*200  */}
      <div
        className="depth-echarts-show"
        ref={ref}    // 通过ref获取dom
        style={{height:'100%',width:'100%'}}
      />
    </div>  
  )
};
